<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            background-color: #f00;
        }

        button:disabled {
            background-color: rgba(255, 0, 0, .3);
        }
    </style>
</head>

<body>

    用户名：<input type="text" name="" id="user">
    <span id="user_span"></span>
    <br>
    密码：<input type="text" name="" id="pwd">
    <span id="pwd_span"></span>
    <br>
    <button disabled>注册</button>



    <script>

        var oUser = document.querySelector('#user');
        var oUserSpan = document.querySelector('#user_span');
        var oPwd = document.querySelector('#pwd');
        var oPwdSpan = document.querySelector('#pwd_span');
        var oBtn = document.querySelector('button');


        var isUser = false, isPwd = false;

        //  验证时  
        //     每一次不通过的时候  都需要  false
        //     每一次通过的时候    都需要  true

        //     不管验证是否通过   都需要判断   isUser , isPwd   



        oUser.oninput = function () {
            var username = oUser.value.trim();
            // 验证没有输入
            if (/^.{0}$/.test(username)) {
                oUserSpan.innerHTML = '空';
                isUser = false;
            }
            // 数字开头
            else if (/\d/.test(username[0])) {
                oUserSpan.innerHTML = '数字开头';
                isUser = false;
            }
            // 长度
            else if (!/^.{4,10}$/.test(username)) {
                oUserSpan.innerHTML = '长度不对';
                isUser = false;
            }
            // 字母，数字，下划线
            else if (/\W/.test(username)) {
                oUserSpan.innerHTML = '只能由数字字母下划线组成';
                isUser = false;
            }

            else {
                oUserSpan.innerHTML = '√';
                isUser = true;
            }

            // 判断按钮是否可以点击
            if (isUser && isPwd) {
                oBtn.disabled = false;
            } else {
                oBtn.disabled = true;
            }
        }


        oPwd.oninput = function () {

            var username = oPwd.value.trim();

            // 验证没有输入
            if (/^.{0}$/.test(username)) {
                oPwdSpan.innerHTML = '空';
                isPwd = false;
            }
            // 字母，数字，下划线
            else if (/\W/.test(username)) {
                oPwdSpan.innerHTML = '只能由数字字母下划线组成';
                isPwd = false;
            }

            // 通过以后还要验证强弱
            else {
                // 验证强弱
                var flag1 = 0, flag2 = 0, flag3 = 0;
                if (/\d/.test(username)) {
                    flag1 = 1;
                }
                if (/[a-z]/.test(username)) {
                    flag2 = 1;
                }
                if (/[A-Z]/.test(username)) {
                    flag3 = 1;
                }
                var res = flag1 + flag2 + flag3;
                if (res === 1) {
                    oPwdSpan.innerHTML = '弱';

                }
                else if (res === 2) {
                    oPwdSpan.innerHTML = '中';

                }
                else if (res === 3) {
                    oPwdSpan.innerHTML = '强';

                }
                isPwd = true;
            }

            // 判断按钮是否可以点击
            if (isUser && isPwd) {
                oBtn.disabled = false;
            } else {
                oBtn.disabled = true;
            }

        }







    </script>

</body>

</html>